<template>
  <el-drawer
    v-model="drawerInfo.isShow"
    title="修改meta"
    :with-header="false"
    :modal="true"
    size="450px"
  >
    <!--表单-->
    <el-tabs type="border-card" @tab-click="tabClick">
      <el-tab-pane label="表单">
        <!--基础属性-->
        <nf-form
          v-form-drag="baseFormProps"
          :model="reMeta"
          v-bind="baseFormProps"
        >
        </nf-form>
        <el-button type="" @click="addNewCol">添加字段</el-button>
      </el-tab-pane>
      <el-tab-pane label="验证">
        <!--验证，字段列表，选择，设置验证-->
        <component
          :is="tabComp.rule"
          :formMeta="reMeta"
        ></component>
      </el-tab-pane>
      <el-tab-pane label="联动">
        <!--扩展属性-->
        <component
          :is="tabComp.optComp"
          :formMeta="reMeta"
        ></component>
      </el-tab-pane>
       <el-tab-pane label="分栏">
        <!--分栏属性-->
        <component
          :is="tabComp.sub"
          :formMeta="reMeta"
        ></component>
      </el-tab-pane>
      <el-tab-pane label="导出">
        表单属性：
        <el-input :rows="30" v-model="mainJson" type="textarea" />
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script>
  import { reactive, computed } from 'vue'
  import { nfForm } from '../map'
  import form_base from './json/form-base.json'
  // import { createColDefValue } from './miniMeta.js'

  // 设置验证规则，列表
  // import formRules from './form-rule.vue'
  // import formOptComp from './form-option-component.vue'

  import sub from './form-sub.vue'
  import rule from './form-rule.vue'
  import optComp from './form-option-comp.vue'

  // 延迟加载
  const _tabComp = {
    sub, // : defineAsyncComponent(() => import('./form-sub.vue')),
    rule, // : defineAsyncComponent(() => import('./form-rule.vue')),
    optComp, // : defineAsyncComponent(() => import('./form-option-comp.vue'))
  }

  const teshu = [
    'controls-position',
    'clearable',
    'validate_event',
    'show_word_limit'
  ]

</script>

<script setup>

  // 定义属性，接收传递来的 meta
  const props = defineProps({
    meta: Object,
    drawerInfo: Object,
    formDom: Object
  })

  const reMeta = props.meta
  const formDom = props.formDom
 
  setTimeout(() => {
    console.log('===表单dom：', formDom)  
  }, 300)

  // 基础属性的表单需要的 meta，创建表单用
  const baseFormProps = reactive(form_base)
  
  // 显示控件的属性的 meta，json格式，js对象格式，模板代码，便于复制粘贴
  const mainJson = computed(() => JSON.stringify(reMeta, null, 2))
 
  const { itemMeta, colOrder, ruleMeta } = props.meta
 
  let colIndex = 0
  // 添加新字段
  const addNewCol = () => {
    colIndex ++
    const newId = new Date().valueOf() + colIndex
    const col = {
      columnId: newId,
      colName: 'newCol_' + colIndex,
      label: "新字段",
      controlType: 101,
      defValue: "",
      placeholder: "动态创建的测试字段",
      title: "是不是很方便？",
      colCount: 1
    }

    // 添加验证，默认必填
    ruleMeta[newId] = [{}]
    // 添加字段
    itemMeta[newId] = col
    colOrder.push(newId)
  }

  // 延迟加载组件
  const tabComp = reactive({
    rule: '',
    optComp: '',
    sub: ''
  })

  // 标签被单击
  const tabClick = (tab) => {
    // console.log('tab', tab)
    switch (tab.index) {
      case '1':
        tabComp.rule = _tabComp.rule
        break
      case '2':
        tabComp.optComp = _tabComp.optComp
        break
      case '3':
        tabComp.sub = _tabComp.sub
        break
    }
  }
</script>